<%-- 
    Document   : 组织结构图
    Created on : 2012-9-4, 17:41:18
    Author     : Danny Lee
--%>
<%@page import="javax.servlet.jsp.JspWriter"%>
<%@page import="java.util.List"%>
<%@page import="com.cmti.skeleton.dto.SysDeptDto"%>
<%
    pageContext.setAttribute("contextPath", request.getContextPath());
    List<SysDeptDto> deptList = (List<SysDeptDto>) request.getAttribute("deptList");
%>
<%!
    private void displaySubDepts(SysDeptDto dept, JspWriter out) throws Exception {
        List<SysDeptDto> subDeptList = dept.getSubDepts();
        if (!subDeptList.isEmpty()) {
            out.println("<ul>");
            for (SysDeptDto subDept : subDeptList) {
                out.println("<li>" + subDept.getName());
                displaySubDepts(subDept, out);
                out.println("</li>");
            }
            out.println("</ul>");
        }
    }
%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">

        <title>组织结构图</title>
        <link rel="stylesheet" href="${contextPath}/resources/css/jquery.jOrgChart.css"/>
        <link rel="stylesheet" href="${contextPath}/resources/css/jquery.jOrgChart.custom.css"/>

        <script type="text/javascript" src="${contextPath}/resources/js/jquery.js" > </script>
        <script type="text/javascript" src="${contextPath}/resources/js/jquery.jOrgChart.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function() {
                $("#org").jOrgChart({
                    chartElement : '#chart'
                });
                $('div.node').each(function(index){
                    if ($(this).text().length > 7) {
                        $(this).css("line-height", "28px");
                    }
                });
                $('#chart').show('slow');
            });
        </script>
    </head>
    <body class="body-color">
        <c:if test="${not empty deptList}">
        <ul id="org" style="display: none">
            <%
                for (SysDeptDto dept : deptList) {
                    out.println("<li>" + dept.getName());
                    displaySubDepts(dept, out);
                    out.println("</li>");
                }
            %>
        </ul>
        </c:if>
        <div id="chart" class="orgChart" style="display: none"></div>
    </body>
</html>
